<!-- eslint-disable vue/this-in-template -->
<template>
	<jk-dialog
		v-model="showDialog"
		title="告警配置-详情"
		width="800px"
		:show-content-loading="showLoading"
		append-to-body
		:show-cancel-btn="false"
		:show-confirm-btn="false"
		:show-close-btn="true"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" label-width="110px">
			<el-form ref="ruleForm" :model="ruleForm" label-width="110px" :show-message="false">
				<el-row ref="box1">
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="告警类型">
							<span class="read-only-2">{{ ruleForm.alarmTypeName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="告警等级">
							<span class="read-only-2">{{ ruleForm.alarmGrade }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="通知方式">
							<span class="read-only-2">{{ ruleForm.notificationMethod }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="处置方式">
							<span class="read-only-2">{{ ruleForm.disposalMethod }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="触发条件说明">
							<span class="read-only-2">{{ ruleForm.triggerRemark }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="创建人">
							<span class="read-only-2">{{ ruleForm.creatorName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="创建时间">
							<span class="read-only-2">{{ ruleForm.createTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="修改人">
							<span class="read-only-2">{{ ruleForm.updaterName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="修改时间">
							<span class="read-only-2">{{ ruleForm.updateTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="审核状态">
							<span class="read-only-2">{{ ruleForm.auditState }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="关联人员总数">
							<span class="read-only-2">{{ this.sum }}人</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="通知人员详情">
							<div ref="box2" class="flex-end-center">
								<div class="flex-end-center">
									<div class="flex-start-center margin-right-10">
										<div class="legend-icon legend-icon-primary"></div>
										<span class="legend-icon-label">已绑定</span>
									</div>
									<div class="flex-start-center">
										<div class="legend-icon legend-icon-info"></div>
										<span class="legend-icon-label">未绑定</span>
									</div>
								</div>
							</div>
							<div class="wx-notice-emp-box" :style="{height: `${dialogTableHeight - 30}px`}">
								<div
									v-for="(item, index) in ruleForm.noticePeople"
									:key="index"
									class="wx-notice-emp-item"
								>
									<el-tag effect="plain" :type="item.openId ? 'primary' : 'info'" class="width-100-percent flex-between-center">
										<div class="flex-start-center">
											<div
												:class="[
													'legend-icon',
													item.openId ? 'legend-icon-primary' : 'legend-icon-info'
												]"
											></div>
											<span>{{ item.name }}</span>
										</div>
									</el-tag>
								</div>
								<div v-if="conceal" class="flex-center width-100-percent">
									<span>暂无</span>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="通知角色详情">
							<div ref="box2" class="flex-end-center">
								<div class="flex-end-center">
									<!-- <div class="flex-start-center margin-right-10">
										<div class="legend-icon legend-icon-primary"></div>
										<span class="legend-icon-label">已绑定</span>
									</div>
									<div class="flex-start-center">
										<div class="legend-icon legend-icon-info"></div>
										<span class="legend-icon-label">未绑定</span>
									</div> -->
								</div>
							</div>
							<div class="wx-notice-emp-box" :style="{height: `${dialogTableHeight - 30}px`}">
								<div
									v-for="(item, index) in ruleForm.noticeRole"
									:key="index"
									class="wx-notice-emp-item"
								>
									<el-tag effect="plain" :type="item.openId ? 'primary' : 'info'" class="width-100-percent flex-between-center">
										<div class="flex-start-center">
											<div
												:class="[
													'legend-icon',
													item.openId ? 'legend-icon-primary' : 'legend-icon-info'
												]"
											></div>
											<span>{{ item.name }}</span>
										</div>
									</el-tag>
								</div>
								<div v-if="conceal" class="flex-center width-100-percent">
									<span>暂无</span>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { getAlarmconfiguration, getAlarmconPaging } from '@/api/alarm/alarmcft.js';

    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        mixins: [calHeight],
        data() {
            return {
                sum: '',
                showDialog: false,
                conceal: true,
                showLoading: true,
                ruleForm: {}
            };
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getDetailRequest() {
                this.showLoading = true;
                return getAlarmconfiguration({ id: this.dataId }).then(res => {
                    this.showLoading = false;
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                        this.sum = this.ruleForm.noticePeople.length + this.ruleForm.noticeRole.length;
                        if (this.ruleForm.alarmGrade === 0) {
                            this.ruleForm.alarmGrade = '高';
                        } else if (this.ruleForm.alarmGrade === 1) {
                            this.ruleForm.alarmGrade = '中';
                        } else {
                            this.ruleForm.alarmGrade = '低';
                        }
                        if (this.ruleForm.notificationMethod.length === 2) {
                            this.ruleForm.notificationMethod = '系统推送,公众号推送';
                        } else if (this.ruleForm.notificationMethod.length === 1 && this.ruleForm.notificationMethod[0] === 0) {
                            this.ruleForm.notificationMethod = '系统推送';
                        } else {
                            this.ruleForm.notificationMethod = '公众号推送';
                        }
                        if (this.ruleForm.disposalMethod === 0) {
                            this.ruleForm.disposalMethod = '任意一人';
                        } else {
                            this.ruleForm.disposalMethod = '所有人';
                        }
                        if (this.ruleForm.noticePeople.length != 0) {
                            this.conceal = false;
                        }
                        if (this.ruleForm.auditState === 0) {
                            this.ruleForm.auditState = '待审核';
                        } else {
                            this.ruleForm.auditState = '已审核';
                        }
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal && this.dataId) {
                    this.getDetailRequest();
                }
            }
        }

    };
</script>
<style scoped lang="scss">
.wx-notice-emp-box {
    border: solid 1px #dcdee2;
    border-radius: 4px;
    overflow: auto;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .wx-notice-emp-item {
        width: calc(100% / 5);
        padding: 2px;
        box-sizing: border-box;
    }
}
.legend-icon-label {
    font-size: 12px;
}
.legend-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}
.legend-icon-primary {
    background: #2d8cf0;
}
.legend-icon-info {
    background: #c5c8ce;
}
</style>
